<script setup lang="ts">

	import SeamlessScroll from "@/components/seamless-scroll";
	import { computed, onMounted, reactive } from "vue";
	import { useSettingStore } from "@/stores";
	import { storeToRefs } from "pinia";
	import EmptyCom from "@/components/empty-com";
  import { useHomepageStore } from '@/stores/homepage';
  import {formatValue} from "api/vepApi";

  // 使用 homepage store
  const homepageStore = useHomepageStore();

  // 面积单位转换函数
  const formatArea = (area: number | string | null | undefined): { value: string, unit: string } => {
    // 处理无效值
    if (area === null || area === undefined || area === '') {
      return { value: '暂无数据', unit: '' };
    }

    // 确保是数字类型
    const numArea = Number(area);

    // 检查是否为有效数字
    if (isNaN(numArea)) {
      return { value: '暂无数据', unit: '' };
    }

    // 根据数值大小自动选择单位
    if (numArea >= 100) {
      // 大于等于100平方公里，保持平方公里单位
      return { value: numArea.toFixed(2), unit: '平方公里' };
    } else if (numArea >= 0.01) {
      // 0.01-99.99平方公里，保持平方公里单位
      return { value: numArea.toFixed(2), unit: '平方公里' };
    } else if (numArea > 0) {
      // 小于0.01平方公里，转换为平方米
      const squareMeters = numArea * 1000000; // 1平方公里 = 1000000平方米
      if (squareMeters >= 10000) {
        // 大于等于10000平方米，转换为公顷
        const hectares = squareMeters / 10000; // 1公顷 = 10000平方米
        return { value: hectares.toFixed(2), unit: '公顷' };
      } else {
        // 小于10000平方米，保持平方米单位
        return { value: squareMeters.toFixed(2), unit: '平方米' };
      }
    } else {
      // 面积为0或负数
      return { value: '0.00', unit: '平方公里' };
    }
  };

  // 生成列表数据
  const generateListData = computed(() => {
    // 检查数据是否存在
    const vepResults = homepageStore.vepResults;

    // 如果没有数据，返回空数组
    if (!vepResults || vepResults.length === 0) {
      return [];
    }

    // 转换数据格式
    return vepResults.map((item: any) => {
      // 处理 projectArea 单位转换
      const projectAreaInfo = formatArea(item.projectArea);

      return {
        head: `VEP项目：${item.vepName}`,
        content: `面积：${projectAreaInfo.value}${projectAreaInfo.unit}，VEP：${formatValue(item.vepResult)}。\n${item.description}`
      };
    });
  });

	const settingStore = useSettingStore();
	const { defaultOption, indexConfig } = storeToRefs(settingStore);
	const state = reactive<any>({
    // 使用计算属性生成的列表数据
    get list() {
      // console.log('vep滚动列表数据', generateListData.value)
      return generateListData.value;
    },

		defaultOption: {
			...defaultOption.value,
			singleHeight: 174,
			limitScrollNum: 1,
			step:1
		},
		scroll: true,
	});

	const comName = computed(() => {
		if (indexConfig.value.rightBottomSwiper) {
			return SeamlessScroll;
		} else {
			return EmptyCom;
		}
	});


  // 生命周期
  onMounted(() => {

  })
</script>

<template>
  <div class="right_bottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }">
    <component :is="comName" :list="state.list" v-model="state.scroll"
               :singleHeight="state.defaultOption.singleHeight" :step="state.defaultOption.step"
               :limitScrollNum="state.defaultOption.limitScrollNum" :hover="state.defaultOption.hover"
               :singleWaitTime="state.defaultOption.singleWaitTime" :wheel="state.defaultOption.wheel">
      <ul class="right_bottom">
        <li class="right_center_item" v-for="(item, i) in state.list" :key="i">
          <span class="orderNum">{{ i + 1 }}</span>
          <div class="inner_right">
            <div class="dibu"></div>
            <div class="flex">
              <div class="info">
                <span class="text-content zhuyao"> {{ item.head }}</span>
              </div>
            </div>

            <div class="flex">
              <div class="info content-info">
                <span class="text-content ciyao content-text" :class="{ warning: item.alertdetail }">
                  {{ item.content }}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </component>
  </div>
</template>

<style scoped lang="scss">
.right_bottom {
  width: 100%;
  height: 100%;

  .right_center_item {
    display: flex;
    align-items: center;
    justify-content: flex-start; // 左对齐
    height: auto;
    padding: 10px 20px;
    font-size: 14px;
    color: #fff;

    .orderNum {
      margin: 0 20px 0 -20px;
      flex-shrink: 0; // 防止序号被压缩
    }

    .inner_right {
      position: relative;
      height: 100%;
      width: 100%; // 改为100%以占满可用空间
      flex-shrink: 1; // 允许收缩
      line-height: 1.5;

      .dibu {
        position: absolute;
        height: 2px;
        width: 104%;
        background-image: url("@/assets/img/zuo_xuxian.png");
        bottom: -12px;
        left: -2%;
        background-size: cover;
      }
    }

    .info {
      margin-right: 10px;
      display: flex;
      align-items: center;
      width: 100%; // 占满父容器宽度

      .labels {
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      .zhuyao {
        color: $primary-color;
        font-size: 17px;
        flex: 1; // 占据剩余空间
      }

      .ciyao {
        color: rgba(255, 255, 255, 0.8);
        flex: 1; // 占据剩余空间
      }

      .warning {
        color: #e6a23c;
        font-size: 15px;
        flex: 1; // 占据剩余空间
      }
    }

    // 为内容添加特殊样式
    .content-info {
      width: 100%;
      align-items: flex-start; // 顶部对齐

      .content-text {
        text-align: left;        // 左对齐
        white-space: pre-line;   // 保留换行符并自动换行
        width: 100%;
        line-height: 2;        // 增加行高提高可读性
        font-size: 16px;         // 适当调整字体大小
      }
    }
  }
}

.right_bottom_wrap {
  overflow: hidden;
  width: 100%;  // 占满父容器宽度
  height: 270px; // 占满父容器高度
  padding: 10px;
  margin-top: 10px;
  box-sizing: border-box; // 包含padding和border在内计算尺寸

}

.overflow-y-auto {
  overflow-y: auto;
}
</style>
